<template>
  <div style="margin-top: 1px">
    <el-header>
      <router-link :to="{path:'/plan'}">
        <el-button :class="[ selectItem =='weather' ? 'button-item-select':'button-normal' ]"
                   @click="clickProject('weather')" style="float: left; width: 110px">
          <span class="button-text">气象</span>
        </el-button>
      </router-link>
      <router-link :to="{path:'/load'}">
        <el-button :class="[ selectItem =='load' ? 'button-item-select':'button-normal' ]"
                   @click="clickProject('load')" style="float: left; width: 110px">
          <span class="button-text">负荷</span>
        </el-button>
      </router-link>
      <router-link :to="{path:'/plan2'}">
        <el-button :class="[ selectItem =='plan' ? 'button-item-select':'button-normal' ]"
                   @click="clickProject('plan')" style="float: left; width: 110px">
          <span class="button-text">方案选型</span>
        </el-button>
      </router-link>
      <router-link :to="{path:'/resource'}">
        <el-button :class="[ selectItem =='dispatch' ? 'button-item-select':'button-normal' ]"
                   @click="clickProject('dispatch')" style="float: left; width: 110px">
          <span class="button-text">资源</span>
        </el-button>
      </router-link>
      <router-link :to="{path:'/paramSet'}">
        <el-button :class="[ selectItem =='param' ? 'button-item-select':'button-normal' ]"
                   @click="clickProject('param')" style="float: left; width: 110px">
          <span class="button-text">参数设定</span>
        </el-button>
      </router-link>
      <router-link :to="{path:'/planResult'}">
        <el-button :class="[ selectItem =='result' ? 'button-item-select':'button-normal' ]"
                   @click="clickProject('result')" style="float: left; width: 110px">
          <span class="button-text">规划结果</span>
        </el-button>
      </router-link>
      <el-button class="button" type="primary" icon="el-icon-s-management" style="float: right" @click="optimize()">优化</el-button>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </div>
</template>
<script>
  export default {
    name: 'meteorological',
    data(){
      return{
        selectItem: 'weather',
      }
    },
    methods:{
      clickProject (id) {
        if (this.selectItem === id) {
          return
        }
        this.selectItem = id
      },
    }
  }
</script>
<style scoped>
  .el-main{
    background-color: #2d3d88;
    width: 100%;
    height: 580px;
  }
  /* 设定地图的大小 */
  #allmap{
    height: 800px;
    width: 100%;
  }
  .button{
    width: 90px;
  }
</style>
